<template>
	<view class="qh-card-tabs">
		<view class="qh-card-tabs__box flex-end-cn">
			<view class="qh-card-tabs__bg"></view>
			<view class="qh-card-tabs__item" v-for="(item, index) in list" :key="index" :class="{'checked': item[keyField] == value}"
				@click="clickItem(index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "qh-card-tabs",
		props: {
			value: {
				type: [String, Number],
				default: '',
			},
			list: {
				type: Array,
				default () {
					return []; //格式：[{name:'',value:'',disabled:false},{name:'',value:'',disabled:false}]  disabled非必传，默认不禁用
				}
			},
			keyName: {
				type: String,
				default: 'name',
			}, //展示的字段名
			keyField: {
				type: String,
				default: 'value',
			}, //绑定的字段名
		},
		emits: ['change', 'input'],
		methods: {
			clickItem(index) {
				if (this.list[index].disabled) return;
				
				let data = this.list[index][this.keyField];
				if (data == this.value) return;
				
				this.$emit('input', data);
				this.$emit('change', data);
			}
		},
	}
</script>

<style lang="scss">
	.qh-card-tabs__box {
		width: 100%;
		height: 104rpx;
		position: relative;
		overflow: hidden;

		.qh-card-tabs__bg {
			width: 100%;
			height: 84rpx;
			border-radius: 12rpx 12rpx 0 0;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0;
			left: 0;

			&::after {
				content: "";
				background: linear-gradient(180deg, rgba(var(--primary-rgb-color), 0.1) 0%, rgba(var(--primary-rgb-color), 0.08) 100%);
				border-radius: 12rpx 12rpx 0 0;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.qh-card-tabs__item {
			flex: 1;
			font-size: 28rpx;
			line-height: 84rpx;
			color: #666666;
			text-align: center;
			z-index: 1;
			transition: 0.1s;

			&.checked {
				color: var(--primary-color);
				font-size: 36rpx;
				font-weight: 500;
				padding-top: 20rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx 12rpx 0 0;
				position: relative;

				&::before {
					content: "";
					border-left: 34rpx solid transparent;
					border-right: 0 solid transparent;
					border-bottom: 104rpx solid #FFFFFF;
					position: absolute;
					top: 8rpx;
					left: -33rpx;
				}

				&::after {
					content: "";
					border-right: 34rpx solid transparent;
					border-left: 0 solid transparent;
					border-bottom: 104rpx solid #FFFFFF;
					position: absolute;
					top: 8rpx;
					right: -33rpx;
				}
			}
		}
	}
</style>
